<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Simple Player</title>
  </head>
  <body style="background:#282c34">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <!-- Just a little test to see the module use.
      I don't know why can't I use the electron in the same way.
    -->
    <script type="module">
      import { hello } from "./test.js";
      hello("are you ok?");
    </script>
    <!--
    <script>
      // import { ipcRenderer } from 'electron';
      // const ipcRenderer = window.require('electron');
      /*
      ipcRenderer.on('full-screen',(event,message)=>{
        console.log(event+message);
        document.querySelector("video").RequestFullScreen();
      });
      */
      window.onload=()=>{
        window.URL = window.URL || window.webkitURL;
        let url;
        const video = document.querySelector("video");
        const files = document.querySelector("input");
        /* 读取本地文件的另一种方法（配合下面的一段被注释的files.onchange()代码）
        let reader  = new FileReader();
        reader.addEventListener("loadend", function () {
          video.src = reader.result;
        }, false);
        */
  
        // 禁用video的右击菜单
        video.oncontextmenu=()=>{return false;};
        // 给video注册监听鼠标点击事件，如果是右键单击，就触发input标签
        video.addEventListener("mousedown",function(event){
          if(event.button==2){
            files.click();
          }
        });
  
        // input标签被触发后的动作——加载本地视频文件。
        files.onchange=()=> {
          if(files.files[0]){
            /*读取本地文件的另一种方法
            reader.readAsDataURL(files.files[0]);
            */
  
            /*
             * window.URL.revokeObjectURL(url);
             * 上面这个要在需要释放的时候进行。否则会让内存压力变大什么的。
             * 
             * 我考虑是不是要在右击选择文件后把它释放掉。
            */
            //尝试释放浏览器内存，但我好像不知道如何看它是否起作用。
            window.URL.revokeObjectURL(url);
  
            url = window.URL.createObjectURL(files.files[0]);
            video.src = url;
            console.log(url);
          }
        }
      
        /* 给video增加一些处理键盘事件的功能，并注册监听.
         * 上面的是safri浏览器的情况，如果是在Chrome中的话，其实是本来就有的。
         *
         *  video.handleKeydown=function(event){
              console.log(this);
              if(event.key=="Enter" || event.key==" "){
                this.paused?this.play():this.pause();
              }
            }
         * 
         *    监听 
         *   window.addEventListener("keypress",(event)=>{
         *    console.log("key:"+event.key+"。");
         *    video.handleKeydown(event);
         *   })
        */
      }
    </script>
    -->
  </body>
</html>


